<template>
  <view class="all">
    <view class="v-u-search">
      <!-- 搜索块 -->
      <view class="v-u-search-position">
        <position ref="usernameInput2"></position>
        <view class="search-position-block" @click="details3()">
          <text class="search-position-text"> {{ fixed }}</text>
          <u-icon
            class="search-position-icon"
            name="arrow-down"
            color="#DEE1E6"
            size="30"
          ></u-icon>
        </view>
      </view>
      <view class="v-u-search-content">
        <u-search
          :show-action="true"
          @search="search"
          action-text="取消"
          :animation="true"
          placeholder="请输入搜索内容"
          v-model="keyword"
        ></u-search>
      </view>
      <!-- 下拉菜单 -->
      <view class="is_fixed">
        <u-dropdown>
          <u-dropdown-item
            @change="change1"
            v-model="value1"
            title="类型"
            :options="options1"
          >
          </u-dropdown-item>
          <u-dropdown-item
            @change="change2"
            v-model="value2"
            title="星级"
            :options="options2"
          >
          </u-dropdown-item>
          <u-dropdown-item
            @change="change3"
            v-model="value3"
            title="排序"
            :options="options3"
          >
          </u-dropdown-item>
        </u-dropdown>
      </view>
    </view>
    <!-- 瀑布流 -->
    <view class="pbl">
      <template>
        <custom-waterfalls-flow
          :value="searchList"
          class="zg"
          imageKey="foodImage3"
          ref="waterfallsFlowRef"
          @wapperClick="wapperClick"
          @imageClick="imageClick"
        >
          <!-- #ifdef MP-WEIXIN -->
          <view
            class="item"
            v-for="(item, index) in searchList"
            :key="index"
            slot="slot{{index}}"
          >
            <view class="title">{{ item.foodName }}</view>
            <view class="xx"
              >推荐指数:<u-rate
                :current="item.foodScore"
                :disabled="true"
              ></u-rate>
            </view>
            <view class="desc">{{ item.foodIntroduce }}</view>
          </view>
          <!-- #endif -->
          <!-- #ifndef MP-WEIXIN -->
          <template v-slot:default="item">
            <view class="item">
              <view class="title">{{ item.foodName }}</view>
              <view class="xx">
                推荐指数:<u-rate
                  :current="item.foodScore"
                  :disabled="true"
                ></u-rate>
              </view>
              <view class="desc">{{ item.foodIntroduce }}</view>
            </view>
          </template>
          <!-- #endif -->
        </custom-waterfalls-flow>
      </template>
    </view>
    <u-loadmore :status="status" :load-text="loadText" />
  </view>
</template>


<script>
// #ifdef MP-WEIXIN
const citySelector = requirePlugin("citySelector");
// #endif
export default {
  data() {
    return {
      urlHeat3: "", // https://fine-food.xiamu.icu
      // urlHeat3: "http://localhost:8080",
      //加载更多。。。
      status: "loadmore",
      loadText: {
        loadmore: "轻轻上拉",
        loading: "努力加载中",
        nomore: "实在没有了",
      },

      newCity: {
        fullname: "",
      },

      //查询接口参数
      pages: "",
      page: "1",
      limit: "6",

      // 条件列表
      fixed: "全部地区",
      // fixed:"长沙",
      type: "全部",
      star: "0",
      sort: "默认排序",
      keyword: "",

      value1: 1,
      value2: 1,
      value3: 1,
      options1: [
        {
          label: "全部",
          value: 1,
        },
        {
          label: "小吃类",
          value: 2,
        },
        {
          label: "主食类",
          value: 3,
        },
      ],
      options2: [
        {
          label: "全部",
          value: 1,
        },
        {
          label: "一星",
          value: 2,
        },
        {
          label: "二星",
          value: 3,
        },
        {
          label: "三星",
          value: 4,
        },
        {
          label: "四星",
          value: 5,
        },
        {
          label: "五星",
          value: 6,
        },
      ],
      options3: [
        {
          label: "默认排序",
          value: 1,
        },
        {
          label: "热搜优先",
          value: 2,
        },
        {
          label: "好评优先",
          value: 3,
        },
      ],
      searchList: [],
    };
  },
  onLoad(e) {
    this.keyword = e.keyword;
    const { hostname } = this.$store.state.moduleCommon;
		this.urlHeat3 = hostname;
    this.searchInit();
  },
  onReady() {},
  onShow() {
    // #ifdef MP-WEIXIN
    const selectedCity = citySelector.getCity();
    this.newCity = selectedCity;
    if (selectedCity != null) {
      this.fixed = selectedCity.name;
      //恢复数据初始状态
      this.searchList = [];
      this.page = 1;
      this.searchDrop();
    }
    console.log(this.newCity);
    // #endif
  },
  onReachBottom() {
    console.log("你好");
    if (this.page < this.pages) {
      this.status = "loading";
      this.page++;
      this.searchDrop();
    } else {
      this.status = "nomore";
    }
  },
  methods: {
    //主体单击事件
    wapperClick(item) {
      this.gotoDetailPageByFoodId(item.foodId);
      // console.log('单项点击事件', item)
    },
    // 图片单击事件
    imageClick(item) {
      this.gotoDetailPageByFoodId(item.foodId);
      // console.log('图片点击事件', item)
    },
    //跳转详情页
    gotoDetailPageByFoodId(foodId) {
      //   console.log("foodId", foodId);
      uni.navigateTo({
        url: `/pages/details/details?foodId=${foodId}`,
        success: (res) => {
          console.log(res);
        },
        fail: (err) => {
          console.log(err);
        },
      });
    },
    //下拉菜单分页查询
    change1(e) {
      this.type = this.options1[e - 1].label;
      console.log("当前类型：" + this.options1[e - 1].label);
      //恢复数据初始状态
      this.searchList = [];
      this.page = 1;
      this.$refs.waterfallsFlowRef.refresh();
      this.searchDrop();
    },
    change2(e) {
      this.star = e - 1;
      console.log("当前星级：", e - 1);
      console.log("当前地区：" + this.fixed);
      //恢复数据初始状态
      this.searchList = [];
      this.page = 1;
      this.$refs.waterfallsFlowRef.refresh();
      this.searchDrop();
    },
    change3(e) {
      this.sort = this.options3[e - 1].label;
      console.log("当前排序：" + this.options3[e - 1].label);
      //恢复数据初始状态
      this.searchList = [];
      this.page = 1;
      this.$refs.waterfallsFlowRef.refresh();
      this.searchDrop();
    },
    //搜索查找内容
    search(e) {
	  this.$refs.waterfallsFlowRef.refresh();
      console.log(this.keyword);
      if (this.keyword === "") {
        console.log("输入不能为空");
      } else {
        // this.$refs.waterfallsFlowRef.refresh();
        this.page = 1;
        uni.request({
          url: this.urlHeat3 + "/api/food/index/search",
          method: "POST",
          data: {
            fixed: this.fixed,
            type: this.type,
            star: this.star,
            sort: this.sort,
            keyword: this.keyword,
            page: this.page,
            limit: this.limit,
          },
          header: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
          success: (res) => {
	  		this.$refs.waterfallsFlowRef.refresh();
            this.searchList = res.data.data.records;
            // this.searchList.push.apply(this.searchList, res.data.data.records)
            this.pages = res.data.data.pages;
            console.log("this.searchList", this.searchList);

            // console.log(this.pages);
          },
        });
      }
    },
	// 第一次不要刷新， 后面的请求交给search刷新
	searchInit(e) {
	console.log(this.keyword);
      if (this.keyword === "") {
        console.log("输入不能为空");
      } else {
        // this.$refs.waterfallsFlowRef.refresh();
        this.page = 1;
        uni.request({
          url: this.urlHeat3 + "/api/food/index/search",
          method: "POST",
          data: {
            fixed: this.fixed,
            type: this.type,
            star: this.star,
            sort: this.sort,
            keyword: this.keyword,
            page: this.page,
            limit: this.limit,
          },
          header: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
          success: (res) => {
            this.searchList = res.data.data.records;
            // this.searchList.push.apply(this.searchList, res.data.data.records)
            this.pages = res.data.data.pages;
            console.log("this.searchList", this.searchList);

            // console.log(this.pages);
          },
        });
      }
	},
    //条件查找内容
    searchDrop(e) {
      // this.$refs.waterfallsFlowRef.refresh();
      console.log(this.keyword);
      if (this.keyword === "") {
        console.log("输入不能为空");
      } else {
        uni.request({
          url: this.urlHeat3 + "/api/food/index/search",
          method: "POST",
          data: {
            fixed: this.fixed,
            type: this.type,
            star: this.star,
            sort: this.sort,
            keyword: this.keyword,
            page: this.page,
            limit: this.limit,
          },
          header: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
          success: (res) => {
            // this.searchList = res.data.data;
            this.searchList.push.apply(this.searchList, res.data.data.records);
            this.pages = res.data.data.pages;
            console.log("this.searchList", this.searchList);
            // console.log(this.pages);
          },
        });
      }
    },
    details3() {
      this.$refs.usernameInput2.mapChooseLocation();
    },
  },
};
</script>

<style lang="scss">
.ttt {
  height: 3000rpx;
  background-color: rebeccapurple;
}

/deep/ .waterfalls-flow {
  margin-left: 15rpx;
  margin-right: 15rpx;
}

// view {
// 	vertical-align: middle;
// }

.v-u-search {
  width: 750rpx;
  height: 140rpx;
  position: fixed;
  top: var(--window-top);
  z-index: 1000;
  background-color: #ffffff;

  .v-u-search-position {
    // background-color: burlywood;
    width: 150rpx;
    height: 65rpx;
    display: inline-block;
    vertical-align: top;

    .search-position-block {
      // display: flex;
      // flex-direction: column:
      // justify-content: center;
      margin-top: 10rpx;
      margin-left: 10rpx;

      .search-position-text {
        display: inline-block;
        vertical-align: top;
        width: 120rpx;
        font-size: 25rpx;
        text-align: center;
        font-weight: bold;

        // overflow: hidden;
        // -webkit-line-clamp: 1;
        // text-overflow: ellipsis;
        // display: -webkit-box;
        // -webkit-box-orient: vertical;
      }

      .search-position-icon {
        margin-top: 7rpx;
        display: inline-block;
        vertical-align: top;
        width: 20rpx;
      }
    }
  }

  .v-u-search-content {
    background-color: #ffffff;
    width: 590rpx;
    height: 65rpx;

    display: inline-block;
    vertical-align: top;
    margin-left: 10rpx;
  }

  .is_fixed {
    background-color: #ffffff;
    /* #ifdef MP */
    // top: 70rpx;
    /* #endif */
    /* #ifdef H5 */
    // top: 140rpx;
    /* #endif */
    // z-index: 100;
    // width: 750rpx;
  }
}

.all {
  width: 100%;

  .pbl {
    width: 100%;
    background-color: rgb(249, 249, 249);

    /* #ifdef MP */
    margin-top: 130rpx;
    /* #endif */
    /* #ifdef H5 */
    margin-top: 150rpx;

    /* #endif */
    .zg {
      // background-color: red;
      margin-left: 20rpx;
      margin-right: 20rpx;
    }

    .item {
      background-color: rgb(255, 255, 255);
      // background-color: red;
      margin-left: 5rpx;
      font-size: 22px;

      .title {
        margin-top: 4rpx;
        font-size: 32rpx;
      }

      .xx {
        font-size: 25rpx;
      }

      .desc {
        font-size: 25rpx;
        overflow: hidden;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }

      .allb {
        width: 100%;
        height: 100rpx;
        // background-color: greenyellow;
        margin-top: 10px;
      }
    }
  }
}
</style>
